<template>
	<div class="wrap">
		<div class="header">
			<span class="img" @click="ret"><img src="../../public/arrow_left.png" alt=""></span>
			<span class="font">搜索</span>
		</div>
		<form class="bottom">
			<input type="text" class="tex" placeholder="请输入商家或美食名称" v-model="inputDatas">
			<input type="button" class="btn" value="提交" @click="historyData">
		</form>
		<div class="history">
			<h4 v-show="show" class="sousuo">商家</h4>
			<div class="h_ul">
				<p v-show="show1" v-for="(item,index) in historys" :key="index">{{item}} <span class="cha" @click="clearAll">×</span></p>
			</div>
			<div v-show="show1" class="clearAll" @click="clearAll">清空搜索历史</div>
		</div>
		<div v-for="(items,index) in data" :key='index' class="soulishi">
			<div class="ssleft">
				<img :src="'//elm.cangdu.org/img/' + items.image_path" alt="">
			</div>
			<div class="ssright">
				<span>{{items.name}}</span>
				<p>月售 {{items.recent_order_num}} 单</p>
				<p>{{items.float_minimum_order_amount}} 元起送 / 距离{{items.distance}}</p>
			</div>
		</div>
		<div>
			<b_but></b_but>
		</div>
	</div>

</template>

<script>
	import b_but from "./all_bottom.vue";
	export default {
		components: {
			b_but
		},
		data: function() {
			return {
				historys: [],
				inputDatas: '',
				msg: '',
				show: true,
				shoew:false,
				jw: '',
				data: [],
			}
		},
		methods: {
			historyData() {
				this.$axios({
					method: 'get',
					url: 'https://elm.cangdu.org/v4/restaurants?geohash=' + this.jw + '&keyword=' + this.inputDatas,
				}).then(res => {
					this.data = res.data;
				})
				let aa = JSON.parse(localStorage.getItem('searchHis'));
				this.historys.unshift(this.inputDatas);
				window.localStorage.setItem('searchHis', JSON.stringify(this.inputDatas));
			},
			clearAll() {
				this.historys = [];
				window.localStorage.setItem('searchHis', JSON.stringify(this.historys))
			},
			ret() {
				window.history.go(-1);
			}
		},
		created() {
			this.jw = sessionStorage.getItem('geo');
			window.console.log(this.jw);
			this.history = JSON.parse(localStorage.getItem('searchHis'));
			if (this.historys.length == 0) {
				this.show = false;
			} else {
				this.show = true;
			}
		},
		beforeUpdate() {
			if (this.historys.length == 0) {
				this.show = false;
			} else {
				this.show = true;
			}
		}
	}
</script>

<style scoped>
	.soulishi {
		background: white;
		border-bottom: 1px solid #e4e4e4;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
	}

	.ssleft {
		width: 34px;
		height: 100%;
		margin-right: 5px;

	}

	.ssright {
		font-size: 12px;

	}

	.ssright p,
	span {
		color: #333;
		font-size: 12px;
	}

	.ssleft img {
		width: 100%;
	}

	.cha {
		margin-left: 260px;
		font-size: 26px;
	}

	.sousuo {
		font-size: 12px;
		padding-left: 10px;
		color: #666;
		height: 40px;
		line-height: 40px;
	}

	.clearAll {
		height: 40px;
		font-size: 14px;
		background: white;
		color: #3190E8;
		text-align: center;
		line-height: 40px;
		font-weight: 700;
	}

	.h_ul p {
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #333;
		background: white;
		padding-left: 6px;
		border-bottom: 1px solid #e4e4e4;
	}

	.header {
		height: 39px;
		background: #3190E8;
		line-height: 35px;
	}

	.img img {
		width: 10%;
		vertical-align: bottom;
	}

	.font {
		font-size: 16px;
		color: white;
		font-weight: 600;
		margin-left: 112px;
		position: absolute;
		top: 5px;
	}

	.bottom {
		height: 50px;
		background: white;
		text-align: center;
		line-height: 50px;
	}

	.btn {
		box-sizing: border-box;
		width: 65.8px;
		height: 30px;
		background: #3190E8;
		padding: 0;
		margin-left: 4px;
		border: 0;
		font-weight: 600;
		color: white;
		border-radius: 3px;
		outline: none;
	}

	.tex {
		width: 230.2px;
		height: 30px;
		box-sizing: border-box;
		color: #333;
		font-weight: 700;
		background: #F2F2F2;
		outline: none;
		border: 0;
		border: 1px solid #E4E4E4;
		border-radius: 5px;
		font-size: 14px;
		padding: 0 5px;
	}
</style>
